<template>
    <div>
        <van-popup class="popup-all" :show="showPopup" @update:show="updateShow" position="bottom"
            :style="{ height: '90%' }" round>
            <div class="popup-content">
                 
                <div style="background-color: #fff">
                    <CommonHeader type="黑" leftText="取消" title="修改密码" :onLeft="onClickLeft" />
                </div>
                <div style="margin: 12px; border-radius: 4px;">
                    <van-field class="field1" label="密码" center v-model="password"
                        :type="showPassword ? 'text' : 'password'" placeholder="请输入密码"
                        :right-icon="showPassword ? 'eye-o' : 'closed-eye'"
                        @click-right-icon="showPassword = !showPassword" />
                    <van-field class="field1" label="确认密码" center v-model="password2"
                        :type="showPassword2 ? 'text' : 'password'" placeholder="请输入确认密码"
                        :right-icon="showPassword2 ? 'eye-o' : 'closed-eye'"
                        @click-right-icon="showPassword2 = !showPassword2" />
                </div>

                <div style="margin: 16px; margin-top: 32px;">
                    <van-button type="primary" round block @click="submitPassword"
                        color="linear-gradient(to right, #00BF87, #25F0A0)">提交</van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch, computed, onBeforeUnmount } from 'vue';
import uiUtil from "@/util/UiUtil.js";
import { useRouter } from 'vue-router';

const router = useRouter();
const emit = defineEmits(['update:show']);
const props = defineProps({
    show: {
        default: false
    },
    propsData: {
        default: {}
    }
});
watch(() => props.show, (newValue, oldValue) => {
    showPopup.value = newValue
    if (newValue) {
        password.value = '';
        password2.value = '';
        console.log(props.propsData);

        userphone.value = props.propsData.userphone
        uuid.value = props.propsData.uuid
    }
})
const showPopup = ref(props.show);
const updateShow = (value) => {
    emit('update:show', value);
};

const password = ref('');
const password2 = ref('');
const userphone = ref('');
const uuid = ref('');
const showPassword = ref(false);
const showPassword2 = ref(false);



const submitPassword = () => {
    if (password === null || password.value === null || password.value === '') {
        uiUtil.toast("请输入密码");
        return
    }

    if (password2 === null || password2.value === null || password2.value === '') {
        uiUtil.toast("请输入确认密码");
        return
    }
    if (password.value != password2.value) {
        uiUtil.toast("两次密码输入不一致");
        return
    }
    if (!uiUtil.containsThreeCategories(password.value)) {
        uiUtil.toast("密码至少包含大、小写字母、数字、特殊字符中的三种。");
        return
    }
    if (password.value.length < 10) {
        uiUtil.toast("密码长度至少10位。");
        return
    }
    let data = {
        username: '',
        phones: userphone.value,
        uuid: uuid.value,
        password: uiUtil.encrypt(password.value),
        method: '',
    }
    uiUtil.http().postObj({
        url: uiUtil.urlPath.resetPwdByPhone,
        data: data,
        start: () => {
            uiUtil.toastLoading('加载中...');
        },
        succeed: (res) => {
            if (!res) {
                uiUtil.toastFail('网络超时');
                return
            }
            if (!res || !res.code || 200 != res.code) {
                uiUtil.toastFail(res.msg);
                return
            }
            uiUtil.toastSuccess(res.msg);
            updateShow(false);
        },
        failed: (err) => {
            // debugger;
            uiUtil.toastFail('登录失败：' + err);
        },
        finish: (type) => {
            // debugger;
            console.log('finish=', type)
            // uiUtil.toastClose();
        }
    })
};
const onClickLeft = () => {
    updateShow(false)
};
</script>

<style scoped>
.popup-content {
    background-color: #F3F9F8;
    height: 100%;
}

.rounded-field {
    border-radius: 32px;
    padding: 8px 16px;
}


.left-text {
    color: black;
    cursor: pointer;
}

.popup-content :deep(.van-search__content) {
    padding: 0 16px;
    background-color: #F1F1F1;
}
</style>